<!DOCTYPE html>
<html lang="zh-CN">
  <head>
  <meta charset="UTF-8">
  <meta 
    name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <meta 
    http-equiv="X-UA-Compatible" 
    content="ie=edge">
  <meta 
    name="theme-color" 
    content="#fff" 
    id="theme-color">
  <meta 
    name="description" 
    content="hexoDemo用于介绍如何使用hexo">
  <link 
    rel="icon" 
    href="/">
  <title>03-Node.js开发环境安装</title>
  
    
      <meta 
        property="og:title" 
        content="03-Node.js开发环境安装">
    
    
      <meta 
        property="og:url" 
        content="https://zwl5670.gitee.io/2011/08/01/11-Node.js/03-Node.js%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E5%AE%89%E8%A3%85/index.html">
    
    
      <meta 
        property="og:img" 
        content="https://img.songhn.com/img/Y67gdd.png">
    
    
      <meta 
        property="og:img" 
        content="hexoDemo用于介绍如何使用hexo">
    
    
      <meta 
        property="og:type" 
        content="article">
      <meta 
        property="og:article:published_time" 
        content="2011-08-01">
      <meta 
        property="og:article:modified_time" 
        content="2023-03-14">
      <meta 
        property="og:article:author" 
        content="zwl5670">
      
        
          <meta 
            property="og:article:tag" 
            content="Node">
        
      
    
  
  
  <link rel="preload" href="//at.alicdn.com/t/font_1946621_i1kgafibvw.css" as="style" >
  <link rel="preload" href="//at.alicdn.com/t/font_1952792_89b4ac4k4up.css" as="style" >
  <link rel="preload" href="/css/main.css" as="style" >
  
  <link rel="modulepreload" href="//instant.page/5.1.0">
  
  <link rel="stylesheet" href="/css/main.css">
  
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1946621_i1kgafibvw.css">
  
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1952792_89b4ac4k4up.css">
  
  
  
    <link rel="stylesheet" href="/js/lib/lightbox/baguetteBox.min.css">
  
  <script>
    function loadScript(url, cb) {
      var script = document.createElement('script');
      script.src = url;
      if (cb) script.onload = cb;
      script.async = true;
      document.body.appendChild(script);
    }
    function loadCSS(href, data, attr) {
      var sheet = document.createElement('link');
      sheet.ref = 'stylesheet';
      sheet.href = href;
      sheet.dataset[data] = attr;
      document.head.appendChild(sheet);
    }
    function changeCSS(cssFile, data, attr) {
      var oldlink = document.querySelector(data);
      var newlink = document.createElement("link");
      newlink.setAttribute("rel", "stylesheet");
      newlink.setAttribute("href", cssFile);
      newlink.dataset.prism = attr;
      document.head.replaceChild(newlink, oldlink);
    }
  </script>
  
    
  
  <script>
    // control reverse button
    var reverseDarkList = {
      dark: 'light',
      light: 'dark'
    };
    var themeColor = {
      dark: '#1c1c1e',
      light: '#fff'
    }
    // get the data of css prefers-color-scheme
    var getCssMediaQuery = function() {
      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    };
    // reverse current darkmode setting function
    var reverseDarkModeSetting = function() {
      var setting = localStorage.getItem('user-color-scheme');
      if(reverseDarkList[setting]) {
        setting = reverseDarkList[setting];
      } else if(setting === null) {
        setting = reverseDarkList[getCssMediaQuery()];
      } else {
        return;
      }
      localStorage.setItem('user-color-scheme', setting);
      return setting;
    };
    // apply current darkmode setting
  </script>
  
    <script>
      var setDarkmode = function(mode) {
      var setting = mode || localStorage.getItem('user-color-scheme');
      if(setting === getCssMediaQuery()) {
        document.documentElement.removeAttribute('data-user-color-scheme');
        localStorage.removeItem('user-color-scheme');
        document.getElementById('theme-color').content = themeColor[setting];
        document.getElementById('theme-color').dataset.mode = setting;
      } else if(reverseDarkList[setting]) {
        document.documentElement.setAttribute('data-user-color-scheme', setting);
        document.getElementById('theme-color').content = themeColor[setting];
        document.getElementById('theme-color').dataset.mode = setting;
      } else {
        document.documentElement.removeAttribute('data-user-color-scheme');
        localStorage.removeItem('user-color-scheme');
        document.getElementById('theme-color').content = themeColor[getCssMediaQuery()];
        document.getElementById('theme-color').dataset.mode = getCssMediaQuery();
      }
    };
    setDarkmode();
    </script>
  
  
  
    <link rel="preload" href="/js/lib/lightbox/baguetteBox.min.js" as="script">
    <link rel="preload" href="/js/lib/lightbox/baguetteBox.min.css" as="style" >
  
  
    <link rel="preload" href="/js/lib/lozad.min.js" as="script">
  
  
  
  
  
  
<meta name="generator" content="Hexo 6.3.0"></head>

  <body>
    <div class="wrapper">
       
      <nav class="navbar">
  <div class="navbar-logo">
    <a class="navbar-logo-main" href="/">
      
      <span class="navbar-logo-dsc">前端面试</span>
      </a>
  </div>
  <div class="navbar-menu">
    
      <a 
        href="/" 
        class="navbar-menu-item">
        
          首页
        
      </a>
    
      <a 
        href="/archives" 
        class="navbar-menu-item">
        
          归档
        
      </a>
    
      <a 
        href="/tags" 
        class="navbar-menu-item">
        
          标签
        
      </a>
    
      <a 
        href="/categories" 
        class="navbar-menu-item">
        
          分类
        
      </a>
    
      <a 
        href="/about" 
        class="navbar-menu-item">
        
          关于
        
      </a>
    
      <a 
        href="/links" 
        class="navbar-menu-item">
        
          友链
        
      </a>
    
    <button 
      class="navbar-menu-item darknavbar navbar-menu-btn" 
      aria-label="Toggle dark mode"
      id="dark">
      <i class="iconfont icon-weather"></i>
    </button>
    <button 
      class="navbar-menu-item searchnavbar navbar-menu-btn" 
      aria-label="Toggle search"
      id="search">
      <!-- <i 
        class="iconfont icon-search" 
        style="font-size: 1.2rem; font-weight: 400;">
      </i> -->
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
        class="iconify iconify--ion" width="28" height="28" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512">
        <path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="28"
          d="M256 80a176 176 0 1 0 176 176A176 176 0 0 0 256 80Z"></path>
        <path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="28"
          d="M232 160a72 72 0 1 0 72 72a72 72 0 0 0-72-72Z"></path>
        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="28"
          d="M283.64 283.64L336 336"></path>
      </svg>
    </button>
  </div>
</nav> 
      
      <div 
        id="local-search" 
        style="display: none">
        <input
          class="navbar-menu-item"
          id="search-input"
          placeholder="请输入搜索内容..." />
        <div id="search-content"></div>
      </div>
      
      <div class="section-wrap">
        <div class="container">
          <div class="columns">
            <aside class="left-column">
              
              <div class="card card-author">
                
  <img 
    src="https://img.songhn.com/img/Y67gdd.png" 
    class="author-img"
    width="88"
    height="88"
    alt="author avatar">

<p class="author-name">zwl5670</p>
<p class="author-description">前端学习资料</p>
<div class="author-message">
  <a 
    class="author-posts-count" 
    href="/archives">
    <span>215</span>
    <span>文章</span>
  </a>
  <a 
    class="author-categories-count" 
    href="/categories">
    <span>14</span>
    <span>分类</span>
  </a>
  <a 
    class="author-tags-count" 
    href="/tags">
    <span>14</span>
    <span>标签</span>
  </a>
</div>

              </div>
               <div class="sticky-tablet">
  
  
    <article class="display-when-two-columns spacer">
      <div class="card card-content toc-card">
        <div class="toc-header">
  <i 
    class="iconfont icon-menu" 
    style="padding-right: 2px;">
  </i>目录
</div>
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#Node-js-%E7%89%88%E6%9C%AC%E5%B8%B8%E8%AF%86"><span class="toc-text">Node.js 版本常识</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Node-js-%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE%EF%BC%9A%E9%80%9A%E8%BF%87-Node-js-%E5%AE%89%E8%A3%85%E5%8C%85%EF%BC%88%E4%B8%8D%E6%8E%A8%E8%8D%90%EF%BC%89"><span class="toc-text">Node.js 运行环境配置：通过 Node.js 安装包（不推荐）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Node-js-%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83%E5%AE%89%E8%A3%85%EF%BC%9A%E9%80%9A%E8%BF%87-NVM%EF%BC%88%E6%8E%A8%E8%8D%90%EF%BC%89"><span class="toc-text">Node.js 运行环境安装：通过 NVM（推荐）</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Windows-%E7%B3%BB%E7%BB%9F%E5%AE%89%E8%A3%85-Node-js"><span class="toc-text">Windows 系统安装 Node.js</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Mac-%E7%B3%BB%E7%BB%9F%E5%AE%89%E8%A3%85-Node-js"><span class="toc-text">Mac 系统安装 Node.js</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#NVM-%E7%9A%84%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4"><span class="toc-text">NVM 的常用命令</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Node-js-%E7%9A%84%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4"><span class="toc-text">Node.js 的常用命令</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8C%85%E5%92%8C-NPM"><span class="toc-text">包和 NPM</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E5%8C%85"><span class="toc-text">什么是包</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8C%85%E7%9A%84%E5%8A%A0%E8%BD%BD%E6%9C%BA%E5%88%B6"><span class="toc-text">包的加载机制</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#NPM-%E7%9A%84%E6%A6%82%E5%BF%B5"><span class="toc-text">NPM 的概念</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#NPM-%E7%9A%84%E5%AE%89%E8%A3%85%EF%BC%88%E4%B8%8D%E9%9C%80%E8%A6%81%E5%8D%95%E7%8B%AC%E5%AE%89%E8%A3%85%EF%BC%89"><span class="toc-text">NPM 的安装（不需要单独安装）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE-NPM-%E7%9A%84%E5%85%A8%E5%B1%80%E7%9B%AE%E5%BD%95%EF%BC%88%E6%9A%82%E7%95%A5%EF%BC%89"><span class="toc-text">配置 NPM 的全局目录（暂略）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#NPM%E5%8C%85%E7%9A%84%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86"><span class="toc-text">NPM包的版本管理</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#NPM-%E7%9A%84%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4"><span class="toc-text">NPM 的常用命令</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE-npm-%E9%95%9C%E5%83%8F%E6%BA%90"><span class="toc-text">配置 npm 镜像源</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E5%BC%8F-1%EF%BC%9A%E4%B8%B4%E6%97%B6%E5%88%87%E6%8D%A2%E9%95%9C%E5%83%8F%E6%BA%90"><span class="toc-text">方式 1：临时切换镜像源</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E5%BC%8F-2%EF%BC%9A%E5%88%87%E6%8D%A2%E9%95%9C%E5%83%8F%E6%BA%90"><span class="toc-text">方式 2：切换镜像源</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E5%BC%8F-3%EF%BC%9A%E9%80%9A%E8%BF%87-NRM-%E5%88%87%E6%8D%A2%E9%95%9C%E5%83%8F%E6%BA%90%EF%BC%88%E6%8E%A8%E8%8D%90%EF%BC%89"><span class="toc-text">方式 3：通过 NRM 切换镜像源（推荐）</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%B9%E5%BC%8F-4%EF%BC%9A%E5%AE%89%E8%A3%85-cnpm"><span class="toc-text">方式 4：安装 cnpm</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Node-js-%E7%9A%84%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8"><span class="toc-text">Node.js 的简单使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85"><span class="toc-text">赞赏作者</span></a></li></ol>
      </div>
    </article>
  
  
  <article class="card card-content categories-widget">
    <div class="categories-card">
  <div class="categories-header">
    <i 
      class="iconfont icon-fenlei" 
      style="padding-right: 2px;">
    </i>分类
  </div>
  <div class="categories-list">
    
      <a href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E5%85%B7/">
        <div class="categories-list-item">
          前端工具
          <span class="categories-list-item-badge">13</span>
        </div>
      </a>
    
      <a href="/categories/CSS%E5%9F%BA%E7%A1%80/">
        <div class="categories-list-item">
          CSS基础
          <span class="categories-list-item-badge">18</span>
        </div>
      </a>
    
      <a href="/categories/CSS%E8%BF%9B%E9%98%B6/">
        <div class="categories-list-item">
          CSS进阶
          <span class="categories-list-item-badge">9</span>
        </div>
      </a>
    
      <a href="/categories/HTML/">
        <div class="categories-list-item">
          HTML
          <span class="categories-list-item-badge">12</span>
        </div>
      </a>
    
      <a href="/categories/JS%E5%9F%BA%E7%A1%80/">
        <div class="categories-list-item">
          JS基础
          <span class="categories-list-item-badge">56</span>
        </div>
      </a>
    
      <a href="/categories/JS%E5%9F%BA%E7%A1%80ES6/">
        <div class="categories-list-item">
          JS基础ES6
          <span class="categories-list-item-badge">10</span>
        </div>
      </a>
    
      <a href="/categories/JS%E5%9F%BA%E7%A1%80%E5%BC%82%E6%AD%A5/">
        <div class="categories-list-item">
          JS基础异步
          <span class="categories-list-item-badge">11</span>
        </div>
      </a>
    
      <a href="/categories/JS%E8%BF%9B%E9%98%B6/">
        <div class="categories-list-item">
          JS进阶
          <span class="categories-list-item-badge">11</span>
        </div>
      </a>
    
      <a href="/categories/%E7%A7%BB%E5%8A%A8web/">
        <div class="categories-list-item">
          移动web
          <span class="categories-list-item-badge">3</span>
        </div>
      </a>
    
      <a href="/categories/CSS%E5%92%8CDOM/">
        <div class="categories-list-item">
          CSS和DOM
          <span class="categories-list-item-badge">6</span>
        </div>
      </a>
    
      <a href="/categories/Node/">
        <div class="categories-list-item">
          Node
          <span class="categories-list-item-badge">16</span>
        </div>
      </a>
    
      <a href="/categories/Vue%E5%9F%BA%E7%A1%80/">
        <div class="categories-list-item">
          Vue基础
          <span class="categories-list-item-badge">15</span>
        </div>
      </a>
    
      <a href="/categories/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/">
        <div class="categories-list-item">
          性能优化
          <span class="categories-list-item-badge">7</span>
        </div>
      </a>
    
      <a href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/">
        <div class="categories-list-item">
          前端工程化
          <span class="categories-list-item-badge">8</span>
        </div>
      </a>
    
  </div>
</div>
  </article>
  
  <article class="card card-content tags-widget">
    <div class="tags-card">
  <div class="tags-header">
    <i 
      class="iconfont icon-biaoqian" 
      style="padding-right: 2px;">
    </i>热门标签
  </div>
  <div class="tags-list">
    
      <a 
        href="/tags/JS%E5%9F%BA%E7%A1%80/" 
        title="JS基础">
        <div class="tags-list-item">JS基础</div>
      </a>
    
      <a 
        href="/tags/CSS%E5%9F%BA%E7%A1%80/" 
        title="CSS基础">
        <div class="tags-list-item">CSS基础</div>
      </a>
    
      <a 
        href="/tags/Node/" 
        title="Node">
        <div class="tags-list-item">Node</div>
      </a>
    
      <a 
        href="/tags/Vue%E5%9F%BA%E7%A1%80/" 
        title="Vue基础">
        <div class="tags-list-item">Vue基础</div>
      </a>
    
      <a 
        href="/tags/%E5%89%8D%E7%AB%AF%E5%B7%A5%E5%85%B7/" 
        title="前端工具">
        <div class="tags-list-item">前端工具</div>
      </a>
    
      <a 
        href="/tags/HTML/" 
        title="HTML">
        <div class="tags-list-item">HTML</div>
      </a>
    
      <a 
        href="/tags/JS%E8%BF%9B%E9%98%B6/" 
        title="JS进阶">
        <div class="tags-list-item">JS进阶</div>
      </a>
    
      <a 
        href="/tags/JS%E5%9F%BA%E7%A1%80%E5%BC%82%E6%AD%A5/" 
        title="JS基础异步">
        <div class="tags-list-item">JS基础异步</div>
      </a>
    
      <a 
        href="/tags/JS%E5%9F%BA%E7%A1%80ES6/" 
        title="JS基础ES6">
        <div class="tags-list-item">JS基础ES6</div>
      </a>
    
      <a 
        href="/tags/CSS%E8%BF%9B%E9%98%B6/" 
        title="CSS进阶">
        <div class="tags-list-item">CSS进阶</div>
      </a>
    
      <a 
        href="/tags/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/" 
        title="前端工程化">
        <div class="tags-list-item">前端工程化</div>
      </a>
    
      <a 
        href="/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/" 
        title="性能优化">
        <div class="tags-list-item">性能优化</div>
      </a>
    
      <a 
        href="/tags/CSS%E5%92%8CDOM/" 
        title="CSS和DOM">
        <div class="tags-list-item">CSS和DOM</div>
      </a>
    
      <a 
        href="/tags/%E7%A7%BB%E5%8A%A8web/" 
        title="移动web">
        <div class="tags-list-item">移动web</div>
      </a>
    
  </div>
</div>
  </article>
  
  
</div>
            </aside>
            <main class="main-column">
              
<article class="card card-content">
  <header>
    <h1 class="post-title">
      03-Node.js开发环境安装
    </h1>
  </header>
  <div class="post-meta post-show-meta">
    <time datetime="2011-07-31T16:00:00.000Z">
      <i 
        class="iconfont icon-calendar" 
        style="margin-right: 2px;">
      </i>
      <span>2011-08-01</span>
    </time>
    
      <span class="dot"></span>
      
        <a 
          href="/categories/Node/" 
          class="post-meta-link">
          Node
        </a>
      
    
    
      <span class="dot"></span>
      <span>3.7k 字</span>
    
  </div>
  
    <div 
      class="post-meta post-show-meta" 
      style="margin-top: -10px;">
      <div style="display: flex; align-items: center;">
        <i 
          class="iconfont icon-biaoqian" 
          style="margin-right: 2px; font-size: 1.15rem;">
        </i>
        
          
          <a 
            href="/tags/Node/" 
            class="post-meta-link">
            Node
          </a>
        
      </div>
    </div>
  
  </header>
  <div 
    id="section" 
    class="post-content">
    <p><ArticleTopAd></ArticleTopAd></p>
<h2 id="Node-js-版本常识"><a href="#Node-js-版本常识" class="headerlink" title="Node.js 版本常识"></a>Node.js 版本常识</h2><ul>
<li><p>偶数版本为稳定版（0.6.x ，8.10.x）</p>
</li>
<li><p>奇数版本为非稳定版（0.7.x ，9.11.x）</p>
</li>
<li><p>LTS（Long Term Support）</p>
</li>
</ul>
<p>参考链接：<a target="_blank" rel="noopener" href="https://blog.csdn.net/u012532033/article/details/73332099">node.js 中 LTS 和 Current 的区别</a></p>
<h2 id="Node-js-运行环境配置：通过-Node-js-安装包（不推荐）"><a href="#Node-js-运行环境配置：通过-Node-js-安装包（不推荐）" class="headerlink" title="Node.js 运行环境配置：通过 Node.js 安装包（不推荐）"></a>Node.js 运行环境配置：通过 Node.js 安装包（不推荐）</h2><p>去 Node.js 的<a target="_blank" rel="noopener" href="https://nodejs.org/en/">官网</a>下载安装包：</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="http://img.smyhvae.com/20180301_1505.png" class="lozad post-image"src="http://img.smyhvae.com/20180301_1505.png"></p>
<p>我们也可以在<a target="_blank" rel="noopener" href="https://nodejs.org/en/download/releases/">https://nodejs.org/en/download/releases/</a> 里下载历史版本。</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="http://img.smyhvae.com/20180301_1507.png" class="lozad post-image"src="http://img.smyhvae.com/20180301_1507.png"></p>
<p>注意，我们以一定要用偶数版（V4、V6 等)，不要用奇数版（比如 V5），因为奇数版不稳定。</p>
<p>后续如果需要安装其他版本，可以这样做：重新下载最新的安装包，覆盖安装即可。</p>
<p>但我们并不推荐直接采用 Node.js.msi（windows）或者 Node.js.pkg（Mac） 安装包进行安装，因为会产生如下问题。</p>
<p><strong>通过 Node.js 安装包产生的问题</strong>：</p>
<ul>
<li><p>安装新版本时，需要覆盖就版本；而且以前版本安装的很多全局工具包，需要重新安装。</p>
</li>
<li><p>无法回滚到之前的旧版本。</p>
</li>
<li><p>无法在多个版本之间切换（很多时候，不同的项目需要使用特定版本。或者，我想临时尝鲜一下新版本的特性）</p>
</li>
</ul>
<p>因此，我们暂时先不用安装 Node.js，稍后用 NVM 的方式来安装 Node.js。通过 NVM 的方式，可以让多个版本的 Node.js 共存，并灵活切换。</p>
<h2 id="Node-js-运行环境安装：通过-NVM（推荐）"><a href="#Node-js-运行环境安装：通过-NVM（推荐）" class="headerlink" title="Node.js 运行环境安装：通过 NVM（推荐）"></a>Node.js 运行环境安装：通过 NVM（推荐）</h2><p>**<a target="_blank" rel="noopener" href="https://github.com/nvm-sh/nvm">NVM</a>**：node.js version manager，用来管理 node 的版本。</p>
<p><strong>我们可以先安装 NVM，然后通过 NVM 安装 Node.js</strong>。这是官方推荐的做法。</p>
<p>Windows 和 Mac 下安装的 Node.js 的步骤如下。</p>
<h3 id="Windows-系统安装-Node-js"><a href="#Windows-系统安装-Node-js" class="headerlink" title="Windows 系统安装 Node.js"></a>Windows 系统安装 Node.js</h3><p><strong>1、安装 NVM</strong>：</p>
<p>（1）我们去 <a target="_blank" rel="noopener" href="https://github.com/coreybutler/nvm-windows/releases">https://github.com/coreybutler/nvm-windows/releases</a> 下载 NVM 的安装包：</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="http://img.smyhvae.com/20180301_1603.png" class="lozad post-image"src="http://img.smyhvae.com/20180301_1603.png"></p>
<p>下载下来后，直接解压到 <code>D:\web</code>目录下：</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="http://img.smyhvae.com/20180301_1610.png" class="lozad post-image"src="http://img.smyhvae.com/20180301_1610.png"></p>
<p>（2）在上面的目录中，新建一个<code>settings.txt</code>文件，里面的内容填充如下：</p>
<pre class="highlight"><span class="line">root: D:\web\nvm</span><br><span class="line">path: D:\web\nodejs</span><br><span class="line"><span class="built_in">arch</span>: 64</span><br><span class="line">proxy</span><br></pre>

<p>上方内容的解释：</p>
<ul>
<li><p>root 配置为：当前 nvm.exe 所在的目录</p>
</li>
<li><p>path 配置为：node 快捷方式所在的目录</p>
</li>
<li><p>arch 配置为：当前操作系统的位数（32&#x2F;64）</p>
</li>
<li><p>proxy 不用配置</p>
</li>
</ul>
<p>（3）配置环境变量：</p>
<ul>
<li><p><code>NVM_HOME</code> &#x3D; <code>D:\web\nvm</code>（当前 nvm.exe 所在目录）</p>
</li>
<li><p><code>NVM_SYMLINK</code> &#x3D; <code>D:\web\nodejs</code> （node 快捷方式所在的目录）</p>
</li>
<li><p>PATH +&#x3D; <code>;%NVM_HOME%;%NVM_SYMLINK%</code></p>
</li>
</ul>
<p>配置成功后，重启资源管理器。</p>
<p><strong>2、验证：</strong>(在 cmd 命令行中输入命令)</p>
<p>（1）输入<code>nvm</code>命令查看环境变量是否配置成功：</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="http://img.smyhvae.com/20180301_1645.png" class="lozad post-image"src="http://img.smyhvae.com/20180301_1645.png"></p>
<p>（2）输入 <code>nvm ls</code>，查看已安装的所有 node 版本。</p>
<p>（3）输入 <code>nvm -v</code>，查看 已安装的 nvm 版本。</p>
<p>（4）输入 <code>node -v</code>，查看正在使用的 node 版本。</p>
<p>如果 Node 安装失败，可以参考上面这个链接。</p>
<p><strong>3、安装指定版本的 Node.js</strong>：</p>
<pre class="highlight"><span class="line">nvm install 版本号</span><br><span class="line"></span><br><span class="line"><span class="comment"># 举例</span></span><br><span class="line">nvm install 8.10.0</span><br></pre>

<p>输入 <code>node -v</code>，查看当前使用的 node 版本。</p>
<p>关于 NVM 的常用命令，详见下一段。</p>
<p>补充：</p>
<p>如果 Node 安装失败，可以在上方的 <code>settings.txt</code>文件中，新增如下两行，修改镜像源：</p>
<pre class="highlight"><span class="line">node_mirror: https://npm.taobao.org/mirrors/node/</span><br><span class="line">npm_mirror: https://npm.taobao.org/mirrors/npm/</span><br></pre>

<ul>
<li>参考链接：<a target="_blank" rel="noopener" href="https://segmentfault.com/a/1190000011114680">安装 npm，nvm，node</a></li>
</ul>
<h3 id="Mac-系统安装-Node-js"><a href="#Mac-系统安装-Node-js" class="headerlink" title="Mac 系统安装 Node.js"></a>Mac 系统安装 Node.js</h3><p>**1、安装 <a target="_blank" rel="noopener" href="https://github.com/nvm-sh/nvm">NVM</a>**：</p>
<p>（1）打开 终端.app，输入：</p>
<pre class="highlight"><span class="line">curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash</span><br></pre>

<p>安装成功的界面：</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="http://img.smyhvae.com/20180302_2126.png" class="lozad post-image"src="http://img.smyhvae.com/20180302_2126.png"></p>
<p>完成后，nvm 就被安装在了<code>~/.nvm</code>下。我们可以点开 home目录，然后按快捷键「Cmd + Shift + .」，看看 <code>.nvm</code>这个文件夹在不在。</p>
<p>问题1、如果安装时提示 <code>Failed to connect to raw.githubusercontent.com port 443: Connection refused</code>。解决办法：我们直接访问 <a target="_blank" rel="noopener" href="https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh">https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh</a> ，将安装文件保存到本地，然后<code>bash install.sh</code> 执行这个本地文件，即可安装成功。</p>
<p>问题2、如果发现安装失败：</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="http://img.smyhvae.com/20180302_2111.png" class="lozad post-image"src="http://img.smyhvae.com/20180302_2111.png"></p>
<p>原因：Xcode 软件进行过更新。解决办法：打开 Xcode 软件，同意相关内容即可。</p>
<p>（2）配置环境变量：</p>
<p>编辑器打开<code>~/.bash_profile</code>文件，如果不会就在命令行输入<code>open ~/.bash_profile</code>。</p>
<p>（补充：如果你的 Mac 电脑里找不到<code>~/.bash_profile</code>文件，那就找找有没有<code>~/.profile</code>文件，或者<code>~/.bashrc</code>文件，或者<code>~/.zshrc</code>文件。如果还是没有，那你就手动创建一个<code>~/.bash_profile</code>文件）。</p>
<p>在最后一行输入：</p>
<pre class="highlight"><span class="line"><span class="built_in">export</span> NVM_DIR=<span class="string">&quot;<span class="variable">$HOME</span>/.nvm&quot;</span></span><br><span class="line">[ -s <span class="string">&quot;<span class="variable">$NVM_DIR</span>/nvm.sh&quot;</span> ] &amp;&amp; . <span class="string">&quot;<span class="variable">$NVM_DIR</span>/nvm.sh&quot;</span> <span class="comment"># This loads nvm</span></span><br></pre>

<p>如果你发现文件中已经存在了上面这行代码，就不用往里面加了。这一步的作用是每次新打开一个 bash，nvm 都会被自动添加到环境变量中。</p>
<p>最后，输入 <code>source ~/.bash_profile</code>重启环境变量的配置。</p>
<p>PS：NVM 现在已经不支持 Homebrew 的方式来安装了。</p>
<p>参考链接：<a target="_blank" rel="noopener" href="https://www.jianshu.com/p/a3f8778bc0a1">https://www.jianshu.com/p/a3f8778bc0a1</a></p>
<p>参考链接：<a target="_blank" rel="noopener" href="https://blog.csdn.net/science_Lee/article/details/79214127">https://blog.csdn.net/science_Lee/article/details/79214127</a></p>
<p><strong>2、验证：</strong>(在 终端命令行中输入命令)</p>
<p>（1）输入 <code>nvm</code> 命令查看环境变量是否配置成功。</p>
<p>（2）输入 <code>nvm ls</code>，查看已安装的所有 node 版本。</p>
<p>（3）输入 <code>nvm -v</code>，查看 已安装的 nvm 版本。</p>
<p>（4）输入 <code>node -v</code>，查看正在使用的 node 版本。</p>
<p><strong>3、安装指定版本的 Node.js</strong>：</p>
<p>和 Windows 下一样，也是执行如下命令：</p>
<pre class="highlight"><span class="line">nvm install 版本号</span><br><span class="line"></span><br><span class="line"><span class="comment"># 举例</span></span><br><span class="line">nvm install 12.18.0</span><br></pre>

<p>网速有点慢，要稍等。</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="http://img.smyhvae.com/20180302_2148.png" class="lozad post-image"src="http://img.smyhvae.com/20180302_2148.png"></p>
<p>输入 <code>node -v</code>，查看当前使用的 node 版本。</p>
<p>安装好 <code>Node</code> 之后，<code>npm</code> 也会自动安装的，输入 <code>npm -v</code>，查看 npm 的版本。</p>
<p>关于 NVM 的常用命令，详见下一段。</p>
<p><strong>4、让 <code>.bash_profile</code> 环境变量永久生效</strong>：</p>
<p>在 <code>~/.bash_profile</code> 中配置好环境变量后，发现每次重启终端后，配置都会失效，需要重新执行 <code>source ~/.bash_profile</code> 命令。</p>
<p>原因是，zsh加载的是 <code>~/.zshrc</code>文件，而 <code>.zshrc</code> 文件中并没有定义任务环境变量。</p>
<p>解决办法：打开 <code>~/.zshrc</code> 文件，在文件的末尾，添加如下内容即可：</p>
<pre class="highlight"><span class="line"><span class="built_in">source</span> ~/.bash_profile</span><br></pre>

<h2 id="NVM-的常用命令"><a href="#NVM-的常用命令" class="headerlink" title="NVM 的常用命令"></a>NVM 的常用命令</h2><blockquote>
<p>注意，这一段说的是 NVM 的常用命令，不是 Node 的常用命令。</p>
</blockquote>
<p>查看当前使用的 nvm 版本：</p>
<pre class="highlight"><span class="line">nvm --version</span><br></pre>

<p>查看本地安装的所有的 Node.js 版本：</p>
<pre class="highlight"><span class="line"><span class="comment"># 方式1</span></span><br><span class="line">nvm <span class="built_in">ls</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 方式2</span></span><br><span class="line">nvm list</span><br></pre>

<p><strong>安装指定版本的 Node.js：</strong></p>
<pre class="highlight"><span class="line">nvm install 版本号</span><br><span class="line"></span><br><span class="line"><span class="comment"># 举例</span></span><br><span class="line">nvm install 8.10.0</span><br></pre>

<p>卸载指定版本 Node.js：</p>
<pre class="highlight"><span class="line">nvm uninstall 版本号</span><br></pre>

<p><strong>切换使用指定版本的 node</strong>：</p>
<pre class="highlight"><span class="line">nvm use 版本号</span><br></pre>

<p><strong>设置node的默认版本</strong>：</p>
<pre class="highlight"><span class="line">nvm <span class="built_in">alias</span> default 版本号</span><br></pre>


<p><strong>查看全局npm包的安装路径</strong>：</p>
<pre class="highlight"><span class="line">npm root -g</span><br></pre>


<p>查看远程服务器端的所有 Node 版本：</p>
<pre class="highlight"><span class="line">nvm ls-remote</span><br></pre>

<p>执行上面的命令后，在列出的版本清单中，凡是用 <code>Latest LTS</code>标注的版本，则表明是<strong>长期维护</strong>的版本。我们在安装时，建议安装这些版本。当然，我们也可以在网址 <a target="_blank" rel="noopener" href="https://nodejs.org/en/download/releases/">https://nodejs.org/en/download/releases/</a> 查看 LTS 的历史版本。</p>
<h2 id="Node-js-的常用命令"><a href="#Node-js-的常用命令" class="headerlink" title="Node.js 的常用命令"></a>Node.js 的常用命令</h2><p>查看 node 的版本：</p>
<pre class="highlight"><span class="line">$ node -v</span><br></pre>

<p>执行脚本字符串：</p>
<pre class="highlight"><span class="line">$ node -e <span class="string">&#x27;console.log(&quot;Hello World&quot;)&#x27;</span></span><br></pre>

<p>运行脚本文件：</p>
<pre class="highlight"><span class="line">$ node index.js</span><br><span class="line"></span><br><span class="line">$ node path/index.js</span><br><span class="line"></span><br><span class="line">$ node path/index</span><br></pre>

<p>查看帮助：</p>
<pre class="highlight"><span class="line">$ node --<span class="built_in">help</span></span><br><span class="line"></span><br></pre>

<p><strong>进入 REPL 环境：</strong></p>
<pre class="highlight"><span class="line">$ node</span><br></pre>

<p>REPL 的全称：Read、Eval、 Print、Loop。类似于浏览器的控制台。</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="http://img.smyhvae.com/20180301_1900.png" class="lozad post-image"src="http://img.smyhvae.com/20180301_1900.png"></p>
<p>如果要退出 REPL 环境，可以输入<code>.exit</code> 或 <code>process.exit()</code>。</p>
<p>在 VS Code 里，我们可以在菜单栏选择“帮助-&gt;切换开发人员工具”，打开 console 控制台。</p>
<h2 id="包和-NPM"><a href="#包和-NPM" class="headerlink" title="包和 NPM"></a>包和 NPM</h2><h3 id="什么是包"><a href="#什么是包" class="headerlink" title="什么是包"></a>什么是包</h3><p>由于 Node 是一套轻内核的平台，虽然提供了一系列的内置模块，但是不足以满足开发者的需求，于是乎出现了包（package）的概念：<br>与核心模块类似，就是将一些预先设计好的功能或者说 API 封装到一个文件夹，提供给开发者使用。</p>
<p>Node 本身并没有太多的功能性 API，所以市面上涌现出大量的第三方人员开发出来的 Package。</p>
<h3 id="包的加载机制"><a href="#包的加载机制" class="headerlink" title="包的加载机制"></a>包的加载机制</h3><p>如果 Node 中自带的包和第三方的包名冲突了，该怎么处理呢？原则是：</p>
<ul>
<li><p>先在系统核心（优先级最高）的模块中找；</p>
</li>
<li><p>然后到当前项目中 node_modules 目录中找。</p>
</li>
</ul>
<p>比如说：</p>
<pre class="highlight"><span class="line"><span class="title function_">requiere</span>(<span class="string">`fs`</span>);</span><br></pre>

<p>那加载的肯定是系统的包。所以，我们尽量不要创建一些和现有的包重名的包。</p>
<h3 id="NPM-的概念"><a href="#NPM-的概念" class="headerlink" title="NPM 的概念"></a>NPM 的概念</h3><p><strong>NPM</strong>：Node Package Manager。官方链接： <a target="_blank" rel="noopener" href="https://www.npmjs.com/">https://www.npmjs.com/</a></p>
<p>Node.js 发展到现在，已经形成了一个非常庞大的生态圈。包的生态圈一旦繁荣起来，就必须有工具去来管理这些包。NPM 应运而生。</p>
<p>举个例子，当我们在使用 Java 语言做开发时，需要用到 JDK 提供的内置库，以及第三方库。同样，在使用 JS 做开发时，我们可以使用 NPM 包管理器，方便地使用成熟的、优秀的第三方框架，融合到我们自己的项目中，极大地加速日常开发的构建过程。</p>
<p>随着时间的发展，NPM 出现了两层概念：</p>
<ul>
<li><p>一层含义是 Node 的开放式模块登记和管理系统，亦可以说是一个生态圈，一个社区。</p>
</li>
<li><p>另一层含义是 Node 默认的模块管理器，是一个命令行下的软件，用来安装和管理 Node 模块。</p>
</li>
</ul>
<h3 id="NPM-的安装（不需要单独安装）"><a href="#NPM-的安装（不需要单独安装）" class="headerlink" title="NPM 的安装（不需要单独安装）"></a>NPM 的安装（不需要单独安装）</h3><p>NPM 不需要单独安装。默认在安装 Node 的时候，会连带一起安装 NPM：</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="http://img.smyhvae.com/20180302_1105.png" class="lozad post-image"src="http://img.smyhvae.com/20180302_1105.png"></p>
<p>NVM、Node、NPM 安装之后，目录分布如下：</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="http://img.smyhvae.com/20180302_1134.png" class="lozad post-image"src="http://img.smyhvae.com/20180302_1134.png"></p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="http://img.smyhvae.com/20180302_1137.png" class="lozad post-image"src="http://img.smyhvae.com/20180302_1137.png"></p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="http://img.smyhvae.com/20180302_1138.png" class="lozad post-image"src="http://img.smyhvae.com/20180302_1138.png"></p>
<p>输入 <code>npm -v</code>，查看 npm 的版本：</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="http://img.smyhvae.com/20180302_1139.png" class="lozad post-image"src="http://img.smyhvae.com/20180302_1139.png"></p>
<p>如果上方命令无效，可能是之前的 node 并没有完全安装成功。解决办法：<a target="_blank" rel="noopener" href="https://segmentfault.com/a/1190000011114680">https://segmentfault.com/a/1190000011114680</a></p>
<p>另外，Node 附带的 NPM 可能不是最新版本，可以用下面的命令，更新到最新版本：</p>
<pre class="highlight"><span class="line">$ npm install npm -g</span><br></pre>

<h3 id="配置-NPM-的全局目录（暂略）"><a href="#配置-NPM-的全局目录（暂略）" class="headerlink" title="配置 NPM 的全局目录（暂略）"></a>配置 NPM 的全局目录（暂略）</h3><p>NPM 默认安装到当前正在使用 Node 版本所在目录下。我们建议重新配置 NPM 的全局目录。</p>
<p>输入<code>npm config ls</code>，查看：</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="http://img.smyhvae.com/20180302_1210.png" class="lozad post-image"src="http://img.smyhvae.com/20180302_1210.png"></p>
<h3 id="NPM包的版本管理"><a href="#NPM包的版本管理" class="headerlink" title="NPM包的版本管理"></a>NPM包的版本管理</h3><p>NPM包的管理都是通过项目根目录的 <code>package.json</code>文件实现。</p>
<p>当你使用 npm 安装一个包或者更新一个包的时候，package.json 里会自动添加<strong>包名和包的版本</strong>。npm 默认安装<strong>符合条件</strong>的最新版本，然后在版本号之前添加<code>^</code>符号。</p>
<p>NPM包的版本号，是用三位数表示。版本号前面的符号，代表开发者想要更新的的最新版本条件：</p>
<ul>
<li>符号<code>^</code>：固定第一位数。表示主版本固定的情况下，可更新至最新版。例如 <code>vue: &quot;^2.6.0&quot;</code> 表示 2.6.0及其以上的2.x.x 都是满足的。</li>
<li>符号<code>~</code>：固定前两位数。表示次版本固定的情况下，可更新至最新版。例如 <code>vuex: &quot;~2.6.0&quot;</code>，2.6.0及其以上的2.6.x都是满足的。</li>
<li>无符号：三位数都固定。无符号表示固定版本号。例如 <code>vue: &quot;2.6.0&quot;</code>，此时一定是安装<code>2.6.0</code>版本。</li>
</ul>
<p>参考链接：</p>
<ul>
<li><a target="_blank" rel="noopener" href="https://juejin.cn/post/6960928446826741796">请将你的npm依赖版本锁定</a></li>
</ul>
<h2 id="NPM-的常用命令"><a href="#NPM-的常用命令" class="headerlink" title="NPM 的常用命令"></a>NPM 的常用命令</h2><p>查看 npm 当前版本：</p>
<pre class="highlight"><span class="line">npm -v</span><br></pre>

<p>更新 npm：</p>
<pre class="highlight"><span class="line">npm install npm@latest -g</span><br><span class="line"></span><br></pre>

<p>项目初始化：（执行完成后，会生成<code>package.json</code>文件）</p>
<pre class="highlight"><span class="line">npm init</span><br><span class="line"></span><br><span class="line"><span class="comment"># 快速跳过问答式界面，选择默认配置</span></span><br><span class="line">npm init --<span class="built_in">yes</span></span><br></pre>

<p>只在当前工程下安装指定的包：</p>
<pre class="highlight"><span class="line">npm install [package]</span><br></pre>

<p>在全局安装指定的包：</p>
<pre class="highlight"><span class="line">npm install -g [package]</span><br></pre>

<p>安装的包只用于开发环境，不用于生产环境：（会出现在 package.json 文件中的 devDependencies 属性中）</p>
<pre class="highlight"><span class="line">npm install [package] --save-dev</span><br><span class="line"></span><br><span class="line"><span class="comment"># 或者</span></span><br><span class="line">npm install [package] -D</span><br></pre>

<p>安装的包需要发布到生产环境：（会出现在 package.json 文件中的 dependencies 属性中）</p>
<pre class="highlight"><span class="line">npm install [package] --save</span><br><span class="line"></span><br><span class="line"><span class="comment"># 或者</span></span><br><span class="line">npm install [package] -S</span><br></pre>

<p>查看当前目录下已安装的 node 包：</p>
<pre class="highlight"><span class="line">npm list</span><br></pre>

<p>查看全局已经安装的 node 包：</p>
<pre class="highlight"><span class="line">npm list -g</span><br></pre>

<p>查看 npm 帮助命令：</p>
<pre class="highlight"><span class="line">npm --<span class="built_in">help</span></span><br></pre>

<p>查看指定命令的帮助：</p>
<pre class="highlight"><span class="line">npm [指定命令] --<span class="built_in">help</span></span><br></pre>

<p>更新指定的包：</p>
<pre class="highlight"><span class="line">npm update [package]</span><br></pre>

<p>卸载指定的包：</p>
<pre class="highlight"><span class="line">npm uninstall [package]</span><br></pre>

<p>查看配置信息：</p>
<pre class="highlight"><span class="line">npm config list</span><br></pre>

<p>查看本地安装的指定包的信息，没有则显示 empty：</p>
<pre class="highlight"><span class="line">npm <span class="built_in">ls</span> [package]</span><br></pre>

<p>查看全局安装的指定包的信息，没有则显示 empty：</p>
<pre class="highlight"><span class="line">npm <span class="built_in">ls</span> [package] -g</span><br></pre>

<p>查看远程 npm 上指定包的所有版本信息：</p>
<pre class="highlight"><span class="line">npm info [package]</span><br></pre>

<p>查看当前包的安装路径：</p>
<pre class="highlight"><span class="line">npm root</span><br></pre>

<p>查看全局包的安装路径：</p>
<pre class="highlight"><span class="line">npm root -g</span><br></pre>

<h2 id="配置-npm-镜像源"><a href="#配置-npm-镜像源" class="headerlink" title="配置 npm 镜像源"></a>配置 npm 镜像源</h2><p>由于 npm 默认的下载地址在国外（npmjs.com），有时候会被墙，导致无法下载或者下载很慢。因此，我们可以尝试切换成，从其他的镜像源下载 npm 包。</p>
<p>切换镜像源，有下面这几种方式：</p>
<ul>
<li><p>方式 1：临时切换镜像源。</p>
</li>
<li><p>方式 2：切换镜像源</p>
</li>
<li><p>方式 3：通过 NRM 切换镜像源（最为推荐的方式）。</p>
</li>
<li><p>方式 4：cnpm。</p>
</li>
</ul>
<p>下面来分别讲一下。</p>
<h3 id="方式-1：临时切换镜像源"><a href="#方式-1：临时切换镜像源" class="headerlink" title="方式 1：临时切换镜像源"></a>方式 1：临时切换镜像源</h3><p>安装指定包的时候，通过追加 <code>--registry</code>参数即可。格式如下：</p>
<pre class="highlight"><span class="line"><span class="comment"># 格式</span></span><br><span class="line">npm install [package] --registry [https://xxx]</span><br><span class="line"></span><br><span class="line"><span class="comment"># 举例：在下载安装 express 这个包的时候，临时指定镜像源为 https://registry.npm.taobao.org</span></span><br><span class="line">npm install express --registry https://registry.npm.taobao.org</span><br></pre>

<h3 id="方式-2：切换镜像源"><a href="#方式-2：切换镜像源" class="headerlink" title="方式 2：切换镜像源"></a>方式 2：切换镜像源</h3><pre class="highlight"><span class="line">npm config <span class="built_in">set</span> registry https://registry.npm.taobao.org</span><br></pre>

<p>执行上述命令后，以后下载所有 npm 包的时候，都会改为使用淘宝的镜像源。</p>
<h3 id="方式-3：通过-NRM-切换镜像源（推荐）"><a href="#方式-3：通过-NRM-切换镜像源（推荐）" class="headerlink" title="方式 3：通过 NRM 切换镜像源（推荐）"></a>方式 3：通过 NRM 切换镜像源（推荐）</h3><p><strong>NRM</strong>：Node Registry Manager。作用是：<strong>切换和管理 npm 包的镜像源</strong>。</p>
<ul>
<li><p>项目地址：<a target="_blank" rel="noopener" href="https://www.npmjs.com/package/nrm">https://www.npmjs.com/package/nrm</a></p>
</li>
<li><p>GitHub 地址： <a target="_blank" rel="noopener" href="https://github.com/Pana/nrm">https://github.com/Pana/nrm</a></p>
</li>
</ul>
<p><strong>安装 NRM</strong>：</p>
<pre class="highlight"><span class="line">npm install -g nrm</span><br></pre>

<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="http://img.smyhvae.com/20180302_1208.png" class="lozad post-image"src="http://img.smyhvae.com/20180302_1208.png"></p>
<p><strong>NRM 的常用命令：</strong></p>
<pre class="highlight"><span class="line"><span class="comment"># 显示全部的镜像</span></span><br><span class="line">nrm <span class="built_in">ls</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 使用淘宝的镜像</span></span><br><span class="line">nrm use taobao</span><br></pre>

<p>效果如下：</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="http://img.smyhvae.com/20180302_1215.png" class="lozad post-image"src="http://img.smyhvae.com/20180302_1215.png"></p>
<p>推荐的国内加速镜像淘宝：<a target="_blank" rel="noopener" href="https://npm.taobao.org/">https://npm.taobao.org/</a></p>
<h2 id="方式-4：安装-cnpm"><a href="#方式-4：安装-cnpm" class="headerlink" title="方式 4：安装 cnpm"></a>方式 4：安装 cnpm</h2><ul>
<li>项目地址：<a target="_blank" rel="noopener" href="https://npm.taobao.org/">https://npm.taobao.org/</a></li>
</ul>
<p>安装<code>cnpm</code>替换 npm（npm 由于源服务器在国外，下载包的速度较慢，cnpm 会使用国内镜像）：</p>
<pre class="highlight"><span class="line">npm install -g cnpm --registry=https://registry.npm.taobao.org</span><br></pre>

<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="http://img.smyhvae.com/20180302_2204.png" class="lozad post-image"src="http://img.smyhvae.com/20180302_2204.png"></p>
<p>以后我们就可以通过 cnpm 命令去安装一个包。举例如下：</p>
<pre class="highlight"><span class="line"><span class="comment"># 安装 vue 这个包</span></span><br><span class="line">cnpm install vue</span><br></pre>

<p>这里的单词 <code>install</code> 可以简写成 <code>i</code>。</p>
<h2 id="Node-js-的简单使用"><a href="#Node-js-的简单使用" class="headerlink" title="Node.js 的简单使用"></a>Node.js 的简单使用</h2><p>我们可以输入<code>node</code>命令，然后在里面写 js 的代码。</p>
<p>或者，也可以 通过 node 运行 指定的 js 文件。比如，编写好一个 js 文件<code>01.js</code>，然后在命令行输入：</p>
<pre class="highlight"><span class="line">node 01.js</span><br></pre>

<p>就可以执行这个 js 程序，直接在命令行查看运行结果。</p>
<h2 id="赞赏作者"><a href="#赞赏作者" class="headerlink" title="赞赏作者"></a>赞赏作者</h2><p>创作不易，你的赞赏和认可，是我更新的最大动力：</p>
<p><img  srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://img.smyhvae.com/20220401_1800.jpg" class="lozad post-image"src="https://img.smyhvae.com/20220401_1800.jpg"></p>

  </div>
  <div>
    
      <div 
        class="post-note note-warning copyright" 
        style="margin-top: 42px">
        <p>
          <span style="font-weight: bold;">作者：</span><a 
            target="_blank" 
            rel="nofollow noopener noreferrer" 
            href="/about">
            zwl5670
          </a>
        </p>
        <p>
          <span style="font-weight: bold;">文章链接：</span><a 
            target="_blank" 
            rel="nofollow noopener noreferrer" 
            href="https://zwl5670.gitee.io/2011/08/01/11-Node.js/03-Node.js%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E5%AE%89%E8%A3%85/">
            https://zwl5670.gitee.io/2011/08/01/11-Node.js/03-Node.js%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E5%AE%89%E8%A3%85/
          </a>
        </p>
        <p><span style="font-weight: bold;">版权声明：</span>本博客所有文章除特别声明外，均采用<a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">CC BY-NC-SA 4.0 协议</a>。转载请注明出处！</p>
      </div>
    
  </div>
</article>
<div class="nav">
  
    <div class="nav-item-prev">
      <a 
        href="/2011/08/01/11-Node.js/02-Node.js%E7%9A%84%E7%89%B9%E7%82%B9/" 
        class="nav-link">
        <i class="iconfont icon-left nav-prev-icon"></i>
        <div>
          <div class="nav-label">上一篇</div>
          
            <div class="nav-title">02-Node.js的特点 </div>
          
        </div>
      </a>
    </div>
  
  
    <div class="nav-item-next">
      <a 
        href="/2011/08/01/11-Node.js/04-Node.js%E6%A8%A1%E5%9D%97%E5%8C%96%E8%A7%84%E8%8C%83%EF%BC%9ACommonJS/" 
        class="nav-link">
        <div>
          <div class="nav-label">下一篇</div>
          
            <div class="nav-title">04-Node.js模块化规范：CommonJS </div>
          
        </div>
        <i class="iconfont icon-right nav-next-icon"></i>
      </a>
    </div>
  
</div>

<div 
  class="card card-content toc-card" 
  id="mobiletoc">
  <div class="toc-header">
  <i 
    class="iconfont icon-menu" 
    style="padding-right: 2px;">
  </i>目录
</div>
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#Node-js-%E7%89%88%E6%9C%AC%E5%B8%B8%E8%AF%86"><span class="toc-text">Node.js 版本常识</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Node-js-%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE%EF%BC%9A%E9%80%9A%E8%BF%87-Node-js-%E5%AE%89%E8%A3%85%E5%8C%85%EF%BC%88%E4%B8%8D%E6%8E%A8%E8%8D%90%EF%BC%89"><span class="toc-text">Node.js 运行环境配置：通过 Node.js 安装包（不推荐）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Node-js-%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83%E5%AE%89%E8%A3%85%EF%BC%9A%E9%80%9A%E8%BF%87-NVM%EF%BC%88%E6%8E%A8%E8%8D%90%EF%BC%89"><span class="toc-text">Node.js 运行环境安装：通过 NVM（推荐）</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Windows-%E7%B3%BB%E7%BB%9F%E5%AE%89%E8%A3%85-Node-js"><span class="toc-text">Windows 系统安装 Node.js</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Mac-%E7%B3%BB%E7%BB%9F%E5%AE%89%E8%A3%85-Node-js"><span class="toc-text">Mac 系统安装 Node.js</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#NVM-%E7%9A%84%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4"><span class="toc-text">NVM 的常用命令</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Node-js-%E7%9A%84%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4"><span class="toc-text">Node.js 的常用命令</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8C%85%E5%92%8C-NPM"><span class="toc-text">包和 NPM</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E5%8C%85"><span class="toc-text">什么是包</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8C%85%E7%9A%84%E5%8A%A0%E8%BD%BD%E6%9C%BA%E5%88%B6"><span class="toc-text">包的加载机制</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#NPM-%E7%9A%84%E6%A6%82%E5%BF%B5"><span class="toc-text">NPM 的概念</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#NPM-%E7%9A%84%E5%AE%89%E8%A3%85%EF%BC%88%E4%B8%8D%E9%9C%80%E8%A6%81%E5%8D%95%E7%8B%AC%E5%AE%89%E8%A3%85%EF%BC%89"><span class="toc-text">NPM 的安装（不需要单独安装）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE-NPM-%E7%9A%84%E5%85%A8%E5%B1%80%E7%9B%AE%E5%BD%95%EF%BC%88%E6%9A%82%E7%95%A5%EF%BC%89"><span class="toc-text">配置 NPM 的全局目录（暂略）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#NPM%E5%8C%85%E7%9A%84%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86"><span class="toc-text">NPM包的版本管理</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#NPM-%E7%9A%84%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4"><span class="toc-text">NPM 的常用命令</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE-npm-%E9%95%9C%E5%83%8F%E6%BA%90"><span class="toc-text">配置 npm 镜像源</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E5%BC%8F-1%EF%BC%9A%E4%B8%B4%E6%97%B6%E5%88%87%E6%8D%A2%E9%95%9C%E5%83%8F%E6%BA%90"><span class="toc-text">方式 1：临时切换镜像源</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E5%BC%8F-2%EF%BC%9A%E5%88%87%E6%8D%A2%E9%95%9C%E5%83%8F%E6%BA%90"><span class="toc-text">方式 2：切换镜像源</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E5%BC%8F-3%EF%BC%9A%E9%80%9A%E8%BF%87-NRM-%E5%88%87%E6%8D%A2%E9%95%9C%E5%83%8F%E6%BA%90%EF%BC%88%E6%8E%A8%E8%8D%90%EF%BC%89"><span class="toc-text">方式 3：通过 NRM 切换镜像源（推荐）</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%B9%E5%BC%8F-4%EF%BC%9A%E5%AE%89%E8%A3%85-cnpm"><span class="toc-text">方式 4：安装 cnpm</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Node-js-%E7%9A%84%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8"><span class="toc-text">Node.js 的简单使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85"><span class="toc-text">赞赏作者</span></a></li></ol>
</div>
            </main>
            <aside class="right-column">
              <div class="sticky-widescreen">
  
  
    <article class="card card-content toc-card">
      <div class="toc-header">
  <i 
    class="iconfont icon-menu" 
    style="padding-right: 2px;">
  </i>目录
</div>
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#Node-js-%E7%89%88%E6%9C%AC%E5%B8%B8%E8%AF%86"><span class="toc-text">Node.js 版本常识</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Node-js-%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE%EF%BC%9A%E9%80%9A%E8%BF%87-Node-js-%E5%AE%89%E8%A3%85%E5%8C%85%EF%BC%88%E4%B8%8D%E6%8E%A8%E8%8D%90%EF%BC%89"><span class="toc-text">Node.js 运行环境配置：通过 Node.js 安装包（不推荐）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Node-js-%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83%E5%AE%89%E8%A3%85%EF%BC%9A%E9%80%9A%E8%BF%87-NVM%EF%BC%88%E6%8E%A8%E8%8D%90%EF%BC%89"><span class="toc-text">Node.js 运行环境安装：通过 NVM（推荐）</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Windows-%E7%B3%BB%E7%BB%9F%E5%AE%89%E8%A3%85-Node-js"><span class="toc-text">Windows 系统安装 Node.js</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Mac-%E7%B3%BB%E7%BB%9F%E5%AE%89%E8%A3%85-Node-js"><span class="toc-text">Mac 系统安装 Node.js</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#NVM-%E7%9A%84%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4"><span class="toc-text">NVM 的常用命令</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Node-js-%E7%9A%84%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4"><span class="toc-text">Node.js 的常用命令</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8C%85%E5%92%8C-NPM"><span class="toc-text">包和 NPM</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E5%8C%85"><span class="toc-text">什么是包</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8C%85%E7%9A%84%E5%8A%A0%E8%BD%BD%E6%9C%BA%E5%88%B6"><span class="toc-text">包的加载机制</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#NPM-%E7%9A%84%E6%A6%82%E5%BF%B5"><span class="toc-text">NPM 的概念</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#NPM-%E7%9A%84%E5%AE%89%E8%A3%85%EF%BC%88%E4%B8%8D%E9%9C%80%E8%A6%81%E5%8D%95%E7%8B%AC%E5%AE%89%E8%A3%85%EF%BC%89"><span class="toc-text">NPM 的安装（不需要单独安装）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE-NPM-%E7%9A%84%E5%85%A8%E5%B1%80%E7%9B%AE%E5%BD%95%EF%BC%88%E6%9A%82%E7%95%A5%EF%BC%89"><span class="toc-text">配置 NPM 的全局目录（暂略）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#NPM%E5%8C%85%E7%9A%84%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86"><span class="toc-text">NPM包的版本管理</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#NPM-%E7%9A%84%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4"><span class="toc-text">NPM 的常用命令</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE-npm-%E9%95%9C%E5%83%8F%E6%BA%90"><span class="toc-text">配置 npm 镜像源</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E5%BC%8F-1%EF%BC%9A%E4%B8%B4%E6%97%B6%E5%88%87%E6%8D%A2%E9%95%9C%E5%83%8F%E6%BA%90"><span class="toc-text">方式 1：临时切换镜像源</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E5%BC%8F-2%EF%BC%9A%E5%88%87%E6%8D%A2%E9%95%9C%E5%83%8F%E6%BA%90"><span class="toc-text">方式 2：切换镜像源</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E5%BC%8F-3%EF%BC%9A%E9%80%9A%E8%BF%87-NRM-%E5%88%87%E6%8D%A2%E9%95%9C%E5%83%8F%E6%BA%90%EF%BC%88%E6%8E%A8%E8%8D%90%EF%BC%89"><span class="toc-text">方式 3：通过 NRM 切换镜像源（推荐）</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%B9%E5%BC%8F-4%EF%BC%9A%E5%AE%89%E8%A3%85-cnpm"><span class="toc-text">方式 4：安装 cnpm</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Node-js-%E7%9A%84%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8"><span class="toc-text">Node.js 的简单使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85"><span class="toc-text">赞赏作者</span></a></li></ol>
    </article>
  
  
  <article class="card card-content">
    <div class="recent-posts-card">
  <div class="recent-posts-header">
    <i 
      class="iconfont icon-wenzhang_huaban" 
      style="padding-right: 2px;">
    </i>最近文章
  </div>
  <div class="recent-posts-list">
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2023-03-09</div>
        <a href="/2023/03/09/13-React%E5%9F%BA%E7%A1%80/11-React%20Navive%E5%88%9D%E8%AF%86/"><div class="recent-posts-item-content">11-React Navive初识</div></a>
      </div>
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2023-03-09</div>
        <a href="/2023/03/09/13-React%E5%9F%BA%E7%A1%80/10-AntD%E6%A1%86%E6%9E%B6%E7%9A%84upload%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87%E6%97%B6%E4%BD%BF%E7%94%A8customRequest%E6%96%B9%E6%B3%95%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%8A%E4%BC%A0%E8%A1%8C%E4%B8%BA/"><div class="recent-posts-item-content">10-AntD框架的upload组件上传图片时使用customRequest方法自定义上传行为</div></a>
      </div>
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2023-03-09</div>
        <a href="/2023/03/09/13-React%E5%9F%BA%E7%A1%80/09-AntD%E6%A1%86%E6%9E%B6%E7%9A%84upload%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87%E6%97%B6%E9%81%87%E5%88%B0%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9D%91/"><div class="recent-posts-item-content">09-AntD框架的upload组件上传图片时遇到的一些坑</div></a>
      </div>
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2023-03-09</div>
        <a href="/2023/03/09/13-React%E5%9F%BA%E7%A1%80/08-Ant%20Design%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/"><div class="recent-posts-item-content">08-Ant Design的基本使用</div></a>
      </div>
    
  </div>
</div>
  </article>
  
  
</div>
            </aside>
          </div>
        </div>
      </div>
    </div>
     
    <footer class="footer">
  <div class="footer-container">
    <div>
      <div class="footer-dsc">
        <span>
          Copyright ©
          
            2023
          
          
        </span>
        &nbsp;
        <a 
          href="/" 
          class="footer-link">
          前端面试
        </a>
      </div>
    </div>

    
      <div class="footer-dsc">
        
          Powered by
          <a 
            href="https://hexo.io/" 
            class="footer-link" 
            target="_blank" 
            rel="nofollow noopener noreferrer">
            &nbsp;Hexo
          </a>
        
        
          <span>&nbsp;|&nbsp;</span>
        
        
          Theme -
          <a 
            href="https://github.com/theme-kaze" 
            class="footer-link" 
            target="_blank"
            rel="nofollow noopener noreferrer">
            &nbsp;Kaze
          </a>
        
      </div>
    
    
    
    
</footer>
 
    
  <a 
    role="button" 
    id="scrollbutton" 
    class="basebutton" 
    aria-label="回到顶部">
    <i class="iconfont icon-arrowleft button-icon"></i>
  </a>

<a 
  role="button" 
  id="menubutton"
  aria-label="menu button"
  class="basebutton">
  <i class="iconfont icon-menu button-icon"></i>
</a>
<a 
  role="button" 
  id="popbutton" 
  class="basebutton" 
  aria-label="控制中心">
  <i class="iconfont icon-expand button-icon"></i>
</a>
<a 
  role="button" 
  id="darkbutton" 
  class="basebutton darkwidget" 
  aria-label="夜色模式">
  <i class="iconfont icon-weather button-icon"></i>
</a>
<a 
  role="button" 
  id="searchbutton" 
  class="basebutton searchwidget" 
  aria-label="搜索">
  <i class="iconfont icon-search button-icon"></i>
</a> 
     
     
     
      <script>
  var addImgLayout = function () {
    var img = document.querySelectorAll('.post-content img')
    var i
    for (i = 0; i < img.length; i++) {
      var wrapper = document.createElement('a')
      wrapper.setAttribute('href', img[i].getAttribute('data-src'))
      wrapper.setAttribute('aria-label', 'illustration')
      wrapper.style.cssText =
        'width: 100%; display: flex; justify-content: center;'
      if (img[i].alt) wrapper.dataset.caption = img[i].alt
      wrapper.dataset.nolink = true
      img[i].before(wrapper)
      wrapper.append(img[i])
      var divWrap = document.createElement('div')
      divWrap.classList.add('gallery')
      wrapper.before(divWrap)
      divWrap.append(wrapper)
    }
    baguetteBox.run('.gallery')
  }
</script>
<script>
  loadScript(
    "/js/lib/lightbox/baguetteBox.min.js",
    addImgLayout
  )
</script>
 
     
     
    <script src="/js/main.js"></script> 
     
    
      <script>
        var addLazyload = function () {
          var observer = lozad('.lozad', {
            load: function (el) {
              el.srcset = el.getAttribute('data-src')
            },
            loaded: function (el) {
              el.classList.add('loaded')
            },
          })
          observer.observe()
        }
      </script>
      <script>
        loadScript('/js/lib/lozad.min.js', addLazyload)
      </script>
    
    <script src="//instant.page/5.1.0" type="module"
      integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>
    
    
  </body>
</html>
